<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
  <meta name="renderer" content="webkit">
  <meta name="force-rendering" content="webkit">
  <meta name="screen-orientation" content="portrait">
  <meta name="x5-orientation" content="portrait">
  <meta name="x5-fullscreen" content="true">
  <meta name="full-screen" content="yes">
  <meta name="browsermode" content="application">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>7.5小时,能做什么?</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="lib/jweixin-1.0.0.js"></script>
</head>
<body>
<div class="body">
  <!-- loading -->
  <div id="stageLoading" class="stage show">
    <div class="scene scene-loading">
      <div class="loading">
        <img src="img/loading.png">
        <div>
          <p>玩命加载中...</p>
          <p id="loadingProgress">0%</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 7.5小时 -->
  <div id="stage2" class="stage hide">
    <div class="scene scene-text">
      <div class="texts">
        <div class="char" id="text1" style="width: 87px"><img class="img-response" src="img/scene2/1.png"></div>
        <div class="char" id="text2" style="width: 65px"><img class="img-response" src="img/scene2/2.png"></div>
        <div class="char" id="text3" style="width: 62px"><img class="img-response" src="img/scene2/3.png"></div>
        <br>
        <div class="char" id="text4" style="width: 33px"><img class="img-response" src="img/scene2/4.png"></div>
        <div class="char" id="text5" style="width: 35px"><img class="img-response" src="img/scene2/5.png"></div>
        <div class="char" id="text6" style="width: 35px"><img class="img-response" src="img/scene2/6.png"></div>
        <div class="char" id="text7" style="width: 33px"><img class="img-response" src="img/scene2/7.png"></div>
        <div class="char" id="text8" style="width: 23px"><img class="img-response" src="img/scene2/8.png"></div>
      </div>
    </div>
  </div>

  <!-- 碎屏 -->
  <div id="stage3" class="stage hide">
    <div class="scene scene3">
      <div id="s3text"></div>
      <div id="s3crack" class="crack"></div>
    </div>
  </div>

  <!-- 飞机、地图 -->
  <div id="stage4" class="stage hide">
    <div id="scene4" class="scene scene4">
      <div class="left">
        <div id="s4t1" class="s4t1">
          <img class="img-response" src="img/s4t1.png">
        </div>
        <div id="s4planeBox" class="s4plane">
          <div id="s4plane" class="plane"><img class="img-response" src="img/s4plane.png"></div>
          <div id="s4hand" class="s4hand"><img class="img-response" src="img/s4hand.png"></div>
          <div id="s4tail" class="s4tail"><img class="img-response" src="img/s4tail.png"></div>
        </div>
        <div id="s4t2" class="s4t2">
          <img class="img-response" src="img/s4t2.png">
        </div>
      </div>
      <div class="right">
        <div id="s4map" class="map">
          <img class="img-response" src="img/s4map.jpg">
          <div id="s4path" class="path"><img class="img-response" src="img/s4path.png"></div>
          <div id="s4planeIcon" class="plane-icon"><img class="img-response" src="img/s4planeIcon.png"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- 南航飞广州 -->
  <div id="stage5" class="stage hide">
    <div class="scene scene5">
      <div class="s5plane"><img class="img-response" src="img/s5plane.png"></div>
      <div class="s5text"><img class="img-response" src="img/s5text.png"></div>
      <div id="s5btn" class="s5btn"><img class="img-response" src="img/s5btn.png"></div>
    </div>
  </div>

  <!-- 大堡礁和热带雨林 -->
  <div id="stage6" class="stage hide">
    <div id="scene6" class="scene scene6">
      <div id="s6nav" class="s6-nav">
        <div class="dot">
          <div class="outer"></div>
          <div class="inner"></div>
        </div>
        <div class="hand">
          <img class="img-response" src="img/s6hand.png">
        </div>
      </div>

      <div class="hint">
        <div class="arrow arrow-left">
          <img class="img-response" src="img/arrow-left.png">
        </div>
        <div class="text">
          <p>左右拖动查看更多</p>
        </div>
        <div class="arrow arrow-right">
          <img class="img-response" src="img/arrow-right.png">
        </div>
      </div>

      <div class="scroll" id="s6Map1Scroll">
        <div id="s6map1" class="map s6map1">
          <div class="center">
            <div class="text">与海龟共享水趣</div>
            <div id="s6turtle" class="turtle">
              <img class="img-response img-turtle" src="img/s6turtle.png">
            </div>
            <div class="fish">
              <img class="img-response" src="img/s6fish.png">
            </div>
          </div>
        </div>
      </div>
      <div class="scroll" id="s6Map2Scroll" style="display: none;">
        <div id="s6map2" class="map s6map2">
          <div class="center">
            <div class="text">穿梭于热带雨林</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 视频 -->
  <div id="stage7" class="stage hide">
    <div id="scene7" class="scene scene7">
      <div id="s7video" class="s7video">
        <!--<video id="video" playsinline preload autoplay loop src="http://www.i7766.com/ctrip/cairn2018/sound/cairn.mp4"></video>-->
      </div>
      <div id="s7bottom" class="bottom">
        <div class="content">
          <div class="slogans" id="slogans">
            <img class="img-response s7bar" id="s7bar2" src="img/s7bar1.png">
            <img class="img-response s7bar" id="s7bar1" src="img/s7bar2.png" style="display: none">
            <img class="img-response s7slogan" id="s7slogan" src="img/s7slogan.png">
          </div>
          <div class="btns" id="s7btns">
            <a class="s7btn" target="_blank" href="https://pages.ctrip.com/dstweb/201712/kunshilan_h5/index.html"><img
                class="img-response" src="img/s7btn2.png"></a>
            <div id="s7btn1" class="s7btn"><img class="img-response" src="img/s7btn1.png"></div>
            <div class="s7text"><img class="img-response" src="img/s7text.png"></div>
          </div>
          <div class="s7logos"><img class="img-response" src="img/logos.png"></div>
        </div>
        <div class="swiper" id="swiper">
          <div class="swiper-item s7img1"></div>
          <div class="swiper-item s7img2"></div>
        </div>
      </div>

      <div id="s7share" class="s7share hide">
        <img class="share-text" src="img/s7text2.png">
      </div>
    </div>
  </div>

  <!--
   优惠券，微信分享后调出。js代码：
   showScene8();
  -->
  <div id="stage8" class="stage hide">
    <div id="scene8" class="scene scene8">
      <div class="s8text1">
        <img class="img-response" src="img/s8text1.png">
      </div>
      <a class="s8btn" target="_blank" href="http://m.ctrip.com/html5/flight/swift/international/CAN/CNS/2018-02-05/1-0-0?dfilter=airline%3ACZ">
        <img class="img-response" src="img/s8btn1.png">
      </a>
      <a class="s8coupon" target="_blank" href="https://pages.c-ctrip.com/commerce/promote/common/tpl4.0/index.html?disable_webview_cache_key=1&promoteid=302">
        <img class="img-response" src="img/s8coupon.png">
      </a>
      <a class="s8btn" target="_blank" href="https://pages.ctrip.com/dstweb/201712/kunshilan_h5/index.html">
        <img class="img-response" src="img/s8btn2.png">
      </a>
      <div class="s8text2">
        <img class="img-response" src="img/s8text2.png">
      </div>
    </div>
  </div>
</div>
<script src="lib/jquery.min.js"></script>
<script src="lib/preloadjs.min.js"></script>
<script src="lib/soundjs.min.js"></script>
<script src="lib/CSSPlugin.js"></script>
<script src="lib/Ease.js"></script>
<script src="lib/tweenjs.min.js"></script>
<script src="lib/transform.js"></script>
<script src="lib/iscroll.min.js"></script>
<script src="lib/jquery.slides.min.js"></script>
<script src="lib/ykplayer.js"></script>
<script src="js/assets.js"></script>
<script src="js/script.js"></script>

<script type="text/javascript">
  var title = "7.5小时,能做什么?";
  var link = "http://www.i7766.com/ctrip/cairn";
  var imgUrl = "http://www.i7766.com/ctrip/cairn/Content/img/shared.jpg";
  var desc = "花时间等待旅行的蛙儿子回家，不如…";
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: 'wx81e216492e19acf3', // 必填，公众号的唯一标识
    timestamp: 1516722256, // 必填，生成签名的时间戳
    nonceStr: 'cb02dcc8d46747a48b0c558f1651add0', // 必填，生成签名的随机串
    signature: 'CC5D3AA43242762EF49463F21A8B6CDBC76AE590',// 必填，签名，见附录1
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  });
  wx.ready(function () {
    wx.onMenuShareTimeline({
      title: title, // 分享标题
      link: link, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function () {
        sharesuccess("onMenuShareTimeline");
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    });
    wx.onMenuShareAppMessage({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: link, // 分享链接
      imgUrl: imgUrl, // 分享图标
      type: '', // 分享类型,music、video或link，不填默认为link
      dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
      success: function () {
        sharesuccess("onMenuShareAppMessage");
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    });
    wx.onMenuShareQQ({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: link, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function () {
        sharesuccess("onMenuShareQQ");
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    });
    wx.onMenuShareWeibo({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: link, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function () {
        sharesuccess("onMenuShareWeibo");
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    });
    wx.onMenuShareQZone({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: link, // 分享链接
      imgUrl: imgUrl, // 分享图标
      success: function () {
        sharesuccess("onMenuShareQZone");
      },
      cancel: function () {
        // 用户取消分享后执行的回调函数
      }
    });
  });
  function sharesuccess(type) {
    showScene8();
  }
</script>

</body>
</html>